import React from 'react'
import { Modal, Button, Space } from 'antd'
import { ExclamationCircleOutlined } from '@ant-design/icons'

interface ConfirmModalProps {
  visible: boolean
  title?: string
  content: string
  onConfirm: () => void
  onCancel: () => void
  confirmText?: string
  cancelText?: string
  loading?: boolean
}

const ConfirmModal: React.FC<ConfirmModalProps> = ({
  visible,
  title = '确认操作',
  content,
  onConfirm,
  onCancel,
  confirmText = '确认',
  cancelText = '取消',
  loading = false,
}) => {
  return (
    <Modal
      open={visible}
      title={
        <div className="flex items-center">
          <ExclamationCircleOutlined className="text-red-500 mr-2" />
          <span>{title}</span>
        </div>
      }
      onCancel={onCancel}
      footer={null}
      width={400}
      centered
    >
      <div className="py-4">
        <p className="text-gray-700 mb-6">{content}</p>
        <div className="flex justify-end space-x-3">
          <Button onClick={onCancel} disabled={loading}>
            {cancelText}
          </Button>
          <Button type="primary" danger onClick={onConfirm} loading={loading}>
            {confirmText}
          </Button>
        </div>
      </div>
    </Modal>
  )
}

export default ConfirmModal
